import { Image, useBreakpointValue } from '@chakra-ui/react';

import { useNavigate } from 'react-router-dom';

import mini_logo from '@/assets/images/logo.jpg';
import logo from '@/assets/images/tourfly.png';
import { APP_NAME } from '@/config/constants';
const Logo = () => {
  const navigator = useNavigate();
  const logo_src = useBreakpointValue({
    base: mini_logo,
    sm: mini_logo,
    md: logo,
  });
  return (
    <Image
      alt={APP_NAME}
      cursor="pointer"
      onClick={() => navigator('/')}
      maxH="50px"
      src={logo_src}
    />
  );
};

export default Logo;
